<template>
    <common-layout>
        <div class="top">
            <div class="header">
                <img alt="logo" class="logo" src="@/assets/img/logo.58c9d85b.png"/>
                <span class="title">{{ systemName }}</span>
            </div>
        </div>
        <div class="login">

            <a-form :form="form" @submit="onSubmit">
                <a-tabs :tabBarStyle="{textAlign: 'center'}" size="large" style="padding: 0 2px;">
                    <a-tab-pane key="1">
                        <a-alert v-show="error" :closable="true" :message="error" showIcon style="margin-bottom: 24px;"
                                 type="error"/>
                        <a-form-item>
                            <a-input
                                v-decorator="['account', {rules: [{ required: true, message: '请输入账户名', whitespace: true}]}]"
                                autocomplete="autocomplete"
                                placeholder="用户名"
                                size="large"
                            >
                                <a-icon slot="prefix" type="user"/>
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-input
                                v-model="password"
                                v-decorator="['password', {rules: [{ required: true, message: '请输入密码', whitespace: true}]}]"
                                autocomplete="autocomplete"
                                placeholder="密码"
                                size="large"
                                type="password"
                            >
                                <a-icon slot="prefix" type="lock"/>
                            </a-input>
                        </a-form-item>
                    </a-tab-pane>
                    <!--          <a-tab-pane tab="手机号登录" key="2">-->
                    <!--            <a-form-item>-->
                    <!--              <a-input size="large" placeholder="mobile number" >-->
                    <!--                <a-icon slot="prefix" type="mobile" />-->
                    <!--              </a-input>-->
                    <!--            </a-form-item>-->
                    <!--            <a-form-item>-->
                    <!--              <a-row :gutter="8" style="margin: 0 -4px">-->
                    <!--                <a-col :span="16">-->
                    <!--                  <a-input size="large" placeholder="captcha">-->
                    <!--                    <a-icon slot="prefix" type="mail" />-->
                    <!--                  </a-input>-->
                    <!--                </a-col>-->
                    <!--                <a-col :span="8" style="padding-left: 4px">-->
                    <!--                  <a-button style="width: 100%" class="captcha-button" size="large">获取验证码</a-button>-->
                    <!--                </a-col>-->
                    <!--              </a-row>-->
                    <!--            </a-form-item>-->
                    <!--          </a-tab-pane>-->
                </a-tabs>
                <div>
                    <a-checkbox v-model="remember">
                      <span style="color: black;z-index: 10">
                        记住密码
                      </span>
                    </a-checkbox>
                    <!--          <a style="float: right">忘记密码</a>-->
                </div>
                <a-form-item>
                    <a-button :loading="logging" htmlType="submit" size="large" style="width: 100%;margin-top: 24px"
                              type="primary">登录
                    </a-button>
                </a-form-item>
                <!--        <div>-->
                <!--          其他登录方式-->
                <!--          <a-icon class="icon" type="alipay-circle" />-->
                <!--          <a-icon class="icon" type="taobao-circle" />-->
                <!--          <a-icon class="icon" type="weibo-circle" />-->
                <!--          <router-link style="float: right" to="/dashboard/workplace" >注册账户</router-link>-->
                <!--        </div>-->
            </a-form>
        </div>
    </common-layout>
</template>

<script>
import CommonLayout from '@/layouts/CommonLayout'
import {RESPONSE} from '@/utils/request'
// import {loadRoutes} from '@/utils/routerUtil'
import {mapGetters, mapMutations} from 'vuex'
import {login} from "@/services/user";

export default {
    name: 'Login',
    components: {CommonLayout},
    data() {
        return {
            password: null,
            logging: false,
            error: '',
            form: this.$form.createForm(this),
            remember: false
        }
    },
    computed: {
        ...mapGetters('account', ['user', 'rememberMe']),
        systemName() {
            return this.$store.state.setting.systemName
        }
    },
    mounted() {
        // 不使用多页签，会导致地图不显示
        this.setMultiPage(false);
        console.log("本地缓存的user对象" + this.user);

        console.log(this.rememberMe);
        this.remember = this.rememberMe;
        if (this.rememberMe === true) {
            // 如果用户上次选择了记住我，把账号密码都填上输入框
            this.password = this.user.password;
            this.form.setFieldsValue({
                account: this.user.account,
                password: this.user.password
            })
        }
    },
    methods: {
        ...mapMutations('account', ['setUser', 'setPermissions', 'setRoles', 'setRememberMe']),
        ...mapMutations('setting', ['setMultiPage']),

        onSubmit(e) {
            e.preventDefault()
            this.form.validateFields((err) => {
                if (!err) {
                    this.logging = true
                    const account = this.form.getFieldValue('account')
                    const password = this.form.getFieldValue('password')
                    login(account, password).then(this.afterLogin)
                        .finally(() => {
                                this.logging = false
                            }
                        )
                }
            })
        },
        afterLogin: function (res) {
            console.log(res)
            // alert(res.data.msg)
            this.logging = false
            if (res.data.code === RESPONSE.SUCCESS_CODE && res.data.data.type === true) {

                if (this.remember != null) {
                    // 记录用户选择的是否记住密码的flag
                    this.setRememberMe(this.remember);
                }
                // const {user, permissions, roles} = loginRes.data
                // 本地记录账号信息,和输入框中输入的未加密的密码，方便记住密码后自动填写密码
                let user = res.data.data;
                user.password = this.password;
                user.id = user.site_id;
                this.setUser(user)
                this.setRoles(user.type);
                // this.setPermissions(permissions)
                // this.setRoles(roles)
                // setAuthorization({token: loginRes.data.token, expireAt: new Date(loginRes.data.expireAt)})

                // 提示当前处于重污染时间端
                if (res.data.data.zwr) {
                    this.$notification.warning({
                        message: "当前本区域发布了重污染"
                    })
                }

                this.$router.push('/showstand')
                this.$message.success("登录成功")


                // 获取路由配置
                // getRoutesConfig().then(result => {
                //   const routesConfig = result.data.data
                //   loadRoutes(routesConfig)
                //   this.$router.push('/dashboard/workplace')
                //   this.$message.success(loginRes.message, 3)
                // })
            } else {
                this.$message.error("账号密码不正确");
            }
        }
    }
}
</script>

<style lang="less" scoped>
.common-layout {
    .top {
        text-align: center;

        .header {
            height: 44px;
            line-height: 44px;

            a {
                text-decoration: none;
            }

            .logo {
                z-index: 10;
                height: 44px;
                vertical-align: top;
                margin-right: 16px;
            }

            .title {
                font-size: 33px;
                color: @title-color;
                font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
                font-weight: 600;
                position: relative;
                top: 2px;
            }
        }

        .desc {
            font-size: 14px;
            color: @text-color-second;
            margin-top: 12px;
            margin-bottom: 40px;
        }
    }

    .login {
        padding: 30px 40px;
        border-radius: 10px;
        background-color: white;
        width: 500px;
        margin: 10px auto 0;
        @media screen and (max-width: 576px) {
            width: 95%;
        }
        @media screen and (max-width: 320px) {
            .captcha-button {
                font-size: 14px;
            }
        }

        .icon {
            font-size: 24px;
            color: @text-color-second;
            margin-left: 16px;
            vertical-align: middle;
            cursor: pointer;
            transition: color 0.3s;

            &:hover {
                color: @primary-color;
            }
        }
    }
}
</style>
